<template>
	<view class="cont">
		<!-- 用户信息 -->
		<view class="user-cont flex align-between vertical-center">
			<view class="user-info flex-1 operation-item">
				<view class="user-avatar"><open-data type="userAvatarUrl" /></view>
				<view class="user-name">
					<open-data v-if="!userAccredit" type="userNickName" />
					<text v-if="userAccredit">请先登录 ~</text>
				</view>
			</view>
			<!-- 上课信息 -->
			<view class="learn-cont flex-1" v-if="!userAccredit">
				<text>已上课</text>
				<view class="class flex align-center vertical-center">
					<text>{{ userInfo.c_hour || 0 }}</text>
					<text>课时</text>
				</view>
			</view>
			<image class="bg" src="../../../static/icon/bolangbg.png" mode=""></image>
		</view>
		<!-- 操作列表 -->
		<view class="operation-list operation-item" v-if="!userAccredit">
			<view class="operation-list-item flex align-center vertical-center" v-for="(item, index) in operationList" :key="index" @click="onClickOperation(index)">
				<image :src="item.icon" mode=""></image>
				<text :class="{ 'color-red': index == 4 }">{{ item.name }}</text>
			</view>
		</view>
		<!-- 登录按钮 -->
		<v-button v-if="userAccredit" @onclick="visible = true">登录</v-button>
		<!-- 退出登录选择框 -->
		<v-actionsheet :show="showActionSheet" :tips="tips" :item-list="itemList" :mask-closable="true"
		 :color="color" size="24" :is-cancel="true" @click="itemClick" @cancel="closeActionSheet"></v-actionsheet>
		 
		 <!-- 登录弹窗 -->
		 <v-register v-if="visible" @cancel="onRegisterCancel"></v-register>
		<view class="bottom_shadow"></view>
		<view class="botton_bg"><image src="../../../static/icon/mybg.png" mode=""></image></view>
	</view>
</template>

<script>
import { toast } from "@/utils/util.js";
import UserApi from "@/api/user.js";
import vButton from '@/components/button/button.vue';
import vActionsheet from '@/components/actionsheet/actionsheet';

export default {
	components: {
		vButton,
		vActionsheet,
	},
	data() {
		return {
			visible: false,
			showActionSheet: false,
			tips: "退出登录会清除您的登录信息，确认退出吗？",
			itemList: [],
			operationList: [
				{
					icon: '../../../static/my/xinxi.png',
					name: '我的信息'
				},
				{
					icon: '../../../static/my/dingdan.png',
					name: '我的订单'
				},
				{
					icon: '../../../static/my/kecheng.png',
					name: '我的课程'
				},
				{
					icon: '../../../static/my/dianhua.png',
					name: '服务电话'
				},
				{
					icon: '../../../static/my/tuichu.png',
					name: '退出登录'
				}
			],
			userInfo: null
		};
	},
	computed: {
		userAccredit() {
			return this.$store.state.userAccredit;
		}
	},
	watch: {
		showActionSheet(val) {
			val ? uni.hideTabBar() : setTimeout(()=> uni.showTabBar(), 100);
		} 
	},
	onShow() {
		if(!this.userAccredit) this.getUserCenter()
	},
	methods: {
		async getUserCenter() {
			const res = await UserApi.GetUserCenter()
			this.userInfo = res;
		},
		onClickOperation(index) {
			switch (index) {
				case 0: // 我的信息
					this.onGoNext('/pages/personage/my-info/my-info');
					break;
				case 1: // 我的订单
					this.onGoNext('/pages/personage/my-order/my-order');
					break;
				case 2: // 我的课程
					uni.switchTab({
						url: '/pages/tab/course/course'
					});
					break;
				case 3: // 服务电话
					uni.makePhoneCall({
						phoneNumber: this.userInfo.service_number.toString()
					});
					break;
				case 4: // 退出登录
					let itemList = [{
						text: "退出登录",
						color: "#e53a37"
					}];
					this.itemList = itemList;
					setTimeout(()=> this.showActionSheet = true, 10)
					break;
			}
		},
		itemClick(e) {
			console.log(e)
			if(e.index == 0) {
				this.$store.commit('setUserAccredit', true);
				let userData = uni.getStorageSync("userData");
				userData.login_token = "";
				uni.setStorageSync("userData", userData);
				this.showActionSheet = false
				toast("已退出")
			}
		},
		closeActionSheet () {
			this.showActionSheet = false
		},
		onRegisterCancel() {
			this.visible = false;
			this.getUserCenter();
		}
	}
};
</script>

<style lang="scss">
.user-cont {
	height: 330rpx;
	background-color: $bg-color-main;
	position: relative;
	margin-bottom: 50rpx;
	.user-info,
	.learn-cont {
		margin-bottom: 90rpx;
	}
	.bg {
		width: 100%;
		height: 60rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.user-avatar {
		width: 144rpx;
		height: 144rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.user-name {
		color: $color-white;
		font-size: 24rpx;
		line-height: 24rpx;
		margin-top: 20rpx;
	}
	.learn-cont {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx 0;
		padding-left: 50rpx;
		border-left: 1rpx solid rgba(#fff, 0.8);

		> text {
			font-size: 22rpx;
			line-height: 22rpx;
			margin-bottom: 15rpx;
			color: $color-white;
		}
		.class {
			width: 251rpx;
			height: 67rpx;
			background-color: $color-white;
			border-radius: 10rpx;
			box-shadow: 6rpx 6rpx 6rpx rgba(#000000, 0.1);
			color: $text-color;
			text {
				&:first-child {
					font-size: 42rpx;
					line-height: 42rpx;
					font-weight: bold;
				}
				&:last-child {
					font-size: 22rpx;
					line-height: 42rpx;
					margin-left: 15rpx;
					margin-top: 12rpx;
				}
			}
		}
	}
}
.botton_bg {
	width: 100vw;
	height: 378rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	font-size: 0;
	z-index: 1;
	image {
		width: 100%;
		height: 100%;
	}
}

.operation-list {
	position: relative;
	z-index: 10;
	&-item {
		background-color: $color-white;
		box-shadow: 6rpx 6rpx 6rpx rgba(#000000, 0.1);
		width: 572rpx;
		height: 76rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		font-size: 26rpx;
		color: $text-color;
		&:active {
			transform: translate(1px, 1px);
		}
		> image {
			width: 39rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.color-red {
			color: $color-red;
		}
	}
}
</style>
